<template>
    <div id="app">
        <!-- 如果就是普通的src路径，相对于当前文件进行引用，应存放在assets中(虽然public中也可能解析到)，vue的模块化处理会将图片地址进行处理，在index页面可以显示 -->
        <!-- 参与项目编译图片 -->
        <!-- <img src="../public/imgs/actor.jpg" alt=""> -->
        <img src="./assets/actor.jpg" alt="">
        <!-- 如果路径为变量提供，变量地址相对于index定义，不需要vue的模块化处理，存放于public中 -->
        <!-- 不参与项目编译的图片 -->
        <!-- <img :src="imgUrl" alt=""> -->
        <img :src="imgUrl" alt="">

        <div class="img">
            
        </div>
        <!-- 不参与项目编译的图片 -->
        <div style="width:100px;height:100px;background-image: url('./imgs/user01.png');"></div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            imgUrl:"./imgs/user01.png",
            // imgUrl:"../public/imgs/user01.png",
            // imgUrl1:"../srassets/user01.png"
        }
    }
}
</script>

<style>
    .img{
        height: 100px;
        width: 100px;
         /* 参与项目编译图片 */
        background-image: url("../public/imgs/user01.png");
    }
</style>